<template>
  <div style="width:100%;height:100%;background:none">
    <div class="title">劳务人员</div>
    <div class="personNum">
      <div class="flexBaseline" style="height: 7rem;
    line-height: 7rem;">
        <div>
          <countTo :num="personTotal"></countTo>
        </div>
        <div style="font-size:1.8rem">人</div>
      </div>
      <div style="font-size:1.4rem;color:#fff">在场劳务人员</div>
    </div>

    <div class="contentTitle flexBetween">
      <div class="left flexBaseline" style="30%">
        <div class="leftTitle">分包单位</div>
        <div class="leftContent flexBaseline">
          <div
            style="font-size:3rem;color: #5CFFFF;font-family: 'Agency-FB';
  font-weight: bold;"
          >{{this.orgTotal}}</div>
          <div style="font-size:2rem;color: #5CFFFF;">个</div>
        </div>
      </div>
      <div class="left flexBaseline" style="30%">
        <div class="leftTitle">施工班组</div>
        <div class="leftContent flexBaseline">
          <div
            style="font-size:3rem;color: #5CFFFF;font-family: 'Agency-FB';
  font-weight: bold;"
          >{{this.teamTotal}}</div>
          <div style="font-size:2rem;color: #5CFFFF;">个</div>
        </div>
      </div>
    </div>

    <div class="contentBottom" style="width: 90%;height: 30%;">
      <Echats :echartObj="echartObj"/>
    </div>
  </div>
</template>

<script>
import countTo from '@/components/countTo/index.vue'
import Echats from '@/components/echarts/pie.vue'

export default {
  components: {
    countTo,
    Echats
  },
  // props: ['laborPersonData'],
  data() {
    return {
      onlinePerson: 45236,
      majorOrgTotal: 0,
      labourOrgTotal: 0,
      orgTotal: 0,
      teamTotal: 0,
      echartObj: [],
      personTotal: 0
    }
  },

  mounted() {
    let personData = this.$store.state.dataCenterHome.homePageLabourVO
    if (personData != null) {
      this.majorOrgTotal = personData.majorOrgTotal
      this.labourOrgTotal = personData.labourOrgTotal
      this.orgTotal = personData.orgTotal
      this.teamTotal = personData.teamTotal
      this.personTotal = personData.personTotal
      // console.log(this.personTotal);

      //饼图的数据

      let data = [
        { value: 20, name: '专业分包' },
        { value: 10, name: '劳务分包' }
      ]
      data[0].value = this.majorOrgTotal
      data[1].value = this.labourOrgTotal
      this.echartObj = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        color: ['#18DA7D', '#1D42F9'],
        legend: {
          formatter: function(name) {
            var total = 0
            var target
            for (var i = 0, l = data.length; i < l; i++) {
              // total += data[i].value
              if (data[i].name == name) {
                target = data[i].value
              }
            }
            return name + '     ' + target + '个'
          },
          orient: 'vertical',
          right: 'right',
          top: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '分包类型',
            type: 'pie',
            center: ['24%', '50%'],
            radius: '70%',
            data: data,
            labelLine: {
              show: false
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  methods: {}
}
</script>

<style scoped>
.title {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 7%;
}
.personNum {
  color: #5cffff;
  font-size: 6.8rem;
  width: 32rem;
  height: 12.2rem;
  margin: 0 auto;
  text-align: center;
  /* background: rgba(24, 144, 255, 0.1); */
  padding: 2rem 5.2rem 1.3rem;
  background: url('../../../../../assets/img/laborPersonKuang.png') no-repeat;
  background-size: 100%;

  margin-bottom: 4.8rem;
  font-family: 'Agency-FB';
  font-weight: bold;
}
.contentTitle {
  color: #fff;
  font-size: 1.4rem;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 14%;
}
.leftTitle {
  margin-right: 1.8rem;
}
.contentBottom {
  width: 90%;
  margin: 0 auto;
  height: 30%;
}
</style>